<template>
  <view class="page">
    <u-form :model="editForm" :rules="rules" labelWidth="auto" ref="uForm">
      <u-form-item label="头像" prop="avatar" borderBottom>
        <view style="display: flex; width: 100%; justify-content: flex-end">
          <u-avatar :src="editForm.avatar" @click="upLoadAvatar" />
        </view>
      </u-form-item>
      <u-form-item label="昵称" prop="nickname" borderBottom>
        <u-input
          v-model="editForm.nickname"
          border="none"
          placeholder="请输入昵称"
          maxlength="10"
          input-align="right"
          font-size="28rpx"
          :placeholder-style="placeholderStyle"
        />
        <u-icon slot="right" name="arrow-right" />
      </u-form-item>
      <u-form-item label="性别" prop="gender" borderBottom @click="openSex">
        <u-input
          v-model="sexValue"
          disabled
          disabledColor="#ffffff"
          placeholder="请选择性别"
          input-align="right"
          font-size="28rpx"
          :placeholder-style="placeholderStyle"
          border="none"
        />
        <u-icon slot="right" name="arrow-right" />
      </u-form-item>
    </u-form>

    <view class="btn">
      <u-button
        type="primary"
        shape="circle"
        text="确认修改"
        :throttle-time="1000"
        @click="handleSubmit"
      />
    </view>

    <u-action-sheet
      :show="showSex"
      :actions="sexList"
      round="20"
      cancel-text="取消"
      @close="showSex = false"
      @select="sexSelect"
    />
  </view>
</template>

<script>
import { commonUpload } from "@/request/common.js";
import { myUpdateInfo } from "@/request/myApi.js";
export default {
  data() {
    return {
      editForm: {}, // 编辑表单
      rules: {
        avatar: {
          type: "string",
          required: true,
          message: "请上传头像",
          trigger: ["blur", "change"],
        },
        nickname: {
          type: "string",
          required: true,
          message: "请填写昵称",
          trigger: ["blur", "change"],
        },
        gender: {
          type: "number",
          required: true,
          message: "请选择性别",
          trigger: ["blur", "change"],
        },
      },
      sexValue: "", // 性别ID
      showSex: false, // 性别弹窗
      sexList: [
        // 性别列表
        { name: "男", value: 1 },
        { name: "女", value: 0 },
      ],
      placeholderStyle: {
        fontSize: "28rpx",
        color: "#D9D9D9",
      },
    };
  },
  onReady() {
    //兼容微信小程序，只能通过setRules方法设置。
    this.$refs.uForm.setRules(this.rules);
  },
  onLoad() {
    this.init();
  },
  methods: {
    // 初始化数据
    init() {
      this.editForm = this.$getStorage("USER_INFO") || {};
      this.sexValue = this.editForm.gender ? "男" : "女";
    },
    // 提交修改
    handleSubmit() {
      this.$refs.uForm.validate().then(() => {
        console.log("防抖");
        myUpdateInfo(this.editForm).then((res) => {
          if (res.code == 1) {
            uni.showToast({
              title: "修改成功",
              icon: "none",
            });
            uni.setStorageSync("USER_INFO", JSON.stringify(this.editForm));
            setTimeout(() => {
              uni.navigateBack({ delta: 1 });
            }, 1500);
          }
        });
      });
    },
    // 打开性别选择
    openSex() {
      this.showSex = true;
      uni.hideKeyboard();
    },
    // 选择性别
    sexSelect(val) {
      this.editForm.gender = val.value;
      this.sexValue = val.name;
    },
    // 上传头像
    upLoadAvatar() {
      uni.chooseImage({
        count: 1, // 单选
        sizeType: ["original"],
        sourceType: ["album", "camera"], //相册 相机
        success: (res) => {
          commonUpload(res.tempFilePaths[0]).then((res) => {
            if (res.code == 1) {
              this.editForm.avatar = res.data.fullurl;
            } else {
              uni.showToast({
                title: res.msg,
                icon: "none",
              });
            }
          });
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  padding: 20rpx;
  .btn {
    position: fixed;
    bottom: 100rpx;
    left: 30rpx;
    right: 30rpx;
  }
}
</style>
